<template>
  <div class="pages pagesBox" >

    <div style="position: fixed;top:0;left:3%;display: flex;background:#fff;justify-content: space-around;z-index:9999;;align-items: center;width: 100%">
      <button class="goHomeMy" style="line-height: 26px;font-size: 37rpx;margin-right:0;background: #1989fa" @click="goHome">返回首页</button>
      <button open-type="share" data-name="pageShare" class="shareBtn" :disabled="!cartId" style="margin-right:0;font-size:37rpx" @click="onShareAppMessage" >
        发送名片
      </button>
      <button class="shareBtn" :disabled="!cartId"  @click="goShare" style="margin-left: 30rpx;font-size:37rpx">
        生成二维码
      </button>
    </div>
<!--    <div class="btn_box" v-if="cartId">-->
<!--      <ul class="btnList">-->
<!--        <li>-->
<!--          <button open-type="share" data-name="pageShare" class="share" @click="onShareAppMessage">-->
<!--            <p>-->
<!--              <img src="../../../static/images/share.png" alt="">-->
<!--            </p>-->
<!--            <div style="width: 100%;font-size: 30rpx;">分享名片</div>-->
<!--          </button>-->

<!--        </li>-->
<!--        <li>-->
<!--          <button class="share">-->
<!--          <p>-->
<!--            <img src="../../../static/images/ma.png" alt="">-->
<!--          </p>-->
<!--          <div style="width: 100%;font-size: 30rpx;" >生成二维码</div>-->
<!--          </button>-->
<!--        </li>-->
<!--      </ul>-->
<!--&lt;!&ndash;      <button open-type="share" class="weui-btn weui-btn_mini weui-btn_default" data-name="pageShare" id="share" @click="onShareAppMessage">分享名片</button>&ndash;&gt;-->
<!--&lt;!&ndash;      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">分享名片码</a>&ndash;&gt;-->
<!--&lt;!&ndash;      <a href="/pages/code/main" class="weui-btn weui-btn_mini weui-btn_default" style="margin-top:15px;" >名片码</a>&ndash;&gt;-->
<!--&lt;!&ndash;      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" open-type="share" data-name="pageShare" id="share" @click="open">分享名片</a>&ndash;&gt;-->
<!--&lt;!&ndash;      <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">分享名片码</a>&ndash;&gt;-->
<!--    </div>-->

    <van-collapse :value=" activeNames" @change="onChange" style="font-size: 30rpx;">
      <van-collapse-item :title="whoTitle+'   '+whoScTotal+'位'" name="1" v-if="cartId">
        <div class="weui-panel__bd">
          <a  class="weui-media-box weui-media-box_appmsg"  v-for="(item,index) in whoSc" @click="goCartIndex(item)">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" :src="item.headImg" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title">{{item.nickname}}</h4>
              <!--                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
            </div>
          </a>
          <div class="weui-loadmore" @click="gewhoSctMore" v-if="loadMore">
            <span class="weui-loadmore__tips">加载更多</span>
          </div>

          <div class="weui-loadmore weui-loadmore_line" style="margin: 0 auto;" v-if="outData">
            <span class="weui-loadmore__tips">已经到底了</span>
          </div>
        </div>

      </van-collapse-item>
      <van-collapse-item :title="lookTitle+'   '+lookListTotal+'位'" name="2" v-if="cartId">
        <div class="weui-panel__bd" >
                        <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" v-for="(item,index) in lookList"  @click="goCartIndex(item)">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" :src="item.headImg" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">{{item.nickname}}</h4>
<!--                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
                            </div>
                        </a>
          <div class="weui-loadmore" @click="gelookLtMore" v-if="loadMore2">
            <span class="weui-loadmore__tips">加载更多</span>
          </div>

          <div class="weui-loadmore weui-loadmore_line" style="margin: 0 auto;" v-if="outData2">
            <span class="weui-loadmore__tips">已经到底了</span>
          </div>
         </div>

      </van-collapse-item>
      <van-collapse-item :title="scTitle+'   '+myScTotal+'位'" name="3">
        <div class="weui-panel__bd" >
          <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" v-for="(item,index) in mySc"  @click="goMycartId(item)">
            <div class="weui-media-box__hd">
              <img class="weui-media-box__thumb" :src="item.cardLogo" alt="">
            </div>
            <div class="weui-media-box__bd">
              <h4 class="weui-media-box__title" >{{item.cardName}}</h4>
              <h4 class="weui-media-box__title" style="color: #9b9b9b;font-size: 26rpx;margin-top:20rpx;">{{item.cardCompany}}</h4>
              <!--                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>-->
            </div>
          </a>
          <div class="weui-loadmore" @click="gemyScLtMore" v-if="loadMore3">
            <span class="weui-loadmore__tips">加载更多</span>
          </div>

          <div class="weui-loadmore weui-loadmore_line" style="margin: 0 auto;" v-if="outData3">
            <span class="weui-loadmore__tips">已经到底了</span>
          </div>
        </div>
      </van-collapse-item>

    </van-collapse>

<!--    <div v-else style="text-align: center;font-size: 28rpx;box-sizing: border-box;padding:20rpx;">-->
<!--      您还没有自己名片，请创建自己的名片-->
<!--    </div>-->
  </div>
</template>

<script>
  import loadingMore from "../../components/loadingMore"
  export default{
    data () {
      return {
        activeNames: ['1'],
        itemList: ['微信好友', '名片码'],
        cartId:"",
        loading:false,
        loadMore:true,
        outData:false,
        loadMore2:false,
        outData2:false,
        loadMore3:false,
        outData3:false,
        whoScTotal:0,//谁收藏我总数
        lookListTotal:0,//谁浏览过我总数
        myScTotal:0,//我的收藏总数
          mySc:[],
        whoScPageIndex2:1,
        whoScPageIndex3:1,
        result:[],
        result2:[],
        result3:[],
        whoScPageIndex:1,
        scTitle:"我的名片夹",
        whoTitle:"谁收藏过我的名片",
        lookTitle:"谁浏览过我的名片",
        lookList:[],
          whoSc:[]
      }
    },
    components:{
      loadingMore
    },
    onPullDownRefresh(){
      this.whoScPageIndex=1;
      this.whoScPageIndex2=1;
      this.whoScPageIndex3=1;
      this.getZfFun(1)
      this.getscFun(2)
      this.getMyScFun(3)
      // wx.stopPullDownRefresh();
      // wx.hideLoading()

    },
      onShareAppMessage () {

          let shareData= JSON.parse(wx.getStorageSync('shareData'))
          // let Authorization= wx.getStorageSync('Authorization')
          let shareType=wx.getStorageSync('shareType')
          let cartId=wx.getStorageSync('cartId')
          let userId= wx.getStorageSync('userId')
          let shareUrl=wx.getStorageSync('shareUrl')
          let that = this

              return {
                  title:  `您好,我是${shareData.company}的${shareData.name},请惠存`, // 转发后 所显示的title
                  path: `/pages/index/main?cartId=${cartId}&userId=${userId}&img=${shareData.logo}&isCartId=2`, // 相对的路径
                  imageUrl:shareData.logo,
                  success: (res) => { // 成功后要做的事情
                      //console.log(res.shareTickets[0])
                      // console.log

                      wx.getShareInfo({
                          shareTicket: res.shareTickets[0],
                          success: (res) => {
                              //console.log(res)
                              //console.log(that.setData.isShow)
                          },
                          fail: function (res) {
                            //console.log(res)
                          },
                          complete: function (res) {
                           // console.log(res)
                          }
                      })
                  },
                  fail: function (res) {
                      // 分享失败
                    //  console.log('分享失败' + res)
                  }
              }

      },
    onShow(){
      this.whoSc=[];
      this.outData=false;
      this.whoScPageIndex=1;
      this.whoScPageIndex2=1;
      this.whoScPageIndex3=1;
      this.outData2=false;
      this.outData3=false;
     this.cartId = wx.getStorageSync('cartId')
     this.getZfFun(1)
        this.getscFun(2)
        this.getMyScFun(3)
        wx.setNavigationBarTitle({
            title: '数据'
        })
        // this.getZfFun(2,this.whoSc)
        // this.getZfFun(2,this.mySc)
    },
    methods: {
      goHome(){
        wx.reLaunch({
          url: '/pages/cardDetail/main'
        })
      },
      gemyScLtMore(){
        this.loadMore3=false;
        this.whoScPageIndex3++;
        this.getMyScFun(3)
      },
      gelookLtMore(){//浏览
        this.loadMore2=false;
        this.whoScPageIndex2++;
        this.getZfFun(1);
      },
      gewhoSctMore(){//谁收藏我
         this.loadMore=false;
         this.whoScPageIndex++;
         this.getscFun(2);
      },
      goMycartId(item){
        this.getindexCard( item.cardId,"").then((data)=>{
          wx.reLaunch({url:`/pages/index/main?cartId=${item.cardId}&userId=${item.forwarderId}`})
        }).catch(()=>{
          wx.showToast({
            title: '名片无效',
            icon: 'none',
            duration: 2000

          })
        })
        // if(item.cardId){
        //
        // }else{
        //   wx.showToast({
        //     title: '此人未创建名片',
        //     icon: 'none',
        //     duration: 2000
        //
        //   })
        // }
      },
      goCartIndexLook(item){
     //   console.log(item)
        if(item.cardId){
          wx.reLaunch({url:`/pages/index/main?cartId=${item.cardId}&userId=${item.userId}&img=${item.headImg}&isCartId=1`})
        }else{
          wx.showToast({
            title: '名片无效',
            icon: 'none',
            duration: 2000

          })
        }
      },
        goCartIndex(item){

          this.getindexCard( "", item.userId).then((data)=>{
          //  console.log(data)
            wx.reLaunch({url:`/pages/index/main?cartId=${data.id}&userId=${data.userId}&img=${item.headImg}&isCartId=1`})
          }).catch(()=>{
              wx.showToast({
                title: '名片无效',
                icon: 'none',
                duration: 2000

              })
          })
          // if(item.cardId){
          //
          // }else{
          //   wx.showToast({
          //     title: '此人未创建名片',
          //     icon: 'none',
          //     duration: 2000
          //
          //   })
          // }



        },
      getindexCard (cartId,userId) {
       return new Promise((resolve,reject) => {
        this.$http.request({
          method: 'get',
          url: `/api/card/detail`,
          body: {
            cardId:cartId||'',
            userId:userId||''
          }
        }).then((data) => {
          if (data.code == 200) {
            resolve(data.data)
          } else {
            reject()

          }
        })
       })
      },
        goShare(){
            wx.navigateTo({ url: '/pages/shareCode/main' })
        },
        getMyScFun(type){
          let userId =  wx.getStorageSync('userId')
            this.$http.request({
                method:'post',
                url:"/api/cardForward/pList",
                body:{
                    type:type,
                    "pageNum":this.whoScPageIndex3,
                    "pageSize": 10,
                     userId:userId

                }
            }).then((data)=>{
                if(data.code==200){
                  wx.stopPullDownRefresh();
                  wx.hideLoading()
                  this.myScTotal=data.data.totalCount
                  this.result3=data.data.list;
                    // this.mySc=data.data.list;
                  if(this.whoScPageIndex3==1){
                    this.mySc=data.data.list;
                    if(this.result3.length<10){

                      this.loadMore3=false;
                      this.outData3=true;
                    }
                    else{

                      this.loadMore3=true;
                      this.outData3=false;
                    }
                  }else{
                    this.mySc.push(...data.data.list);
                    if(this.result3.length<10){

                      this.loadMore3=false;
                      this.outData3=true;
                    } else{

                      this.loadMore3=true;
                      this.outData3=false;
                    }
                  }
                }else{
                  this.loadMore3=true;
                  this.outData3=false;
                }

            })
        },
        getscFun(type){
          let userId =  wx.getStorageSync('userId')
            this.$http.request({
                method:'post',
                url:"/api/cardForward/pList",
                body:{
                    type:type,
                    "pageNum": this.whoScPageIndex,
                    "pageSize": 10,
                     userId:userId
                }
            }).then((data)=>{
                if(data.code==200){
                  wx.stopPullDownRefresh();
                  wx.hideLoading()
                    this.whoScTotal=data.data.totalCount;
                    this.result=data.data.list;

                  //   console.log(this.whoSc)
                  if(this.whoScPageIndex==1){
                    this.whoSc=data.data.list;
                    if(this.result.length<10){

                      this.loadMore=false;
                      this.outData=true;
                    }
                    else{

                      this.loadMore=true;
                      this.outData=false;
                    }
                  }else{
                    this.whoSc.push(...data.data.list);
                    if(this.result.length<10){

                      this.loadMore=false;
                      this.outData=true;
                    } else{

                      this.loadMore=true;
                      this.outData=false;
                    }
                  }

                }else{
                  this.loadMore=true;
                  this.outData=false;
                }


            })
        },
      getZfFun(type,list){
        let userId =  wx.getStorageSync('userId')
        this.$http.request({
          method:'post',
          url:"/api/cardForward/pList",
          body:{
              type:type,
              "pageNum": this.whoScPageIndex2,
              "pageSize": 10,
               userId:userId
          }
        }).then((data)=>{
           if(data.code==200){
             wx.stopPullDownRefresh();
             wx.hideLoading()
             this.lookListTotal=data.data.totalCount;
               // this.lookList=data.data.list;
               this.result2=data.data.list;
             if(this.whoScPageIndex2==1){
               this.lookList=data.data.list;
               if(this.result2.length<10){

                 this.loadMore2=false;
                 this.outData2=true;
               }
               else{

                 this.loadMore2=true;
                 this.outData2=false;
               }
             }else{
               this.lookList.push(...data.data.list);
               if(this.result2.length<10){

                 this.loadMore2=false;
                 this.outData2=true;
               } else{

                 this.loadMore2=true;
                 this.outData2=false;
               }
             }
              // console.log(this.lookList)
           }else {
             this.loadMore2=true;
             this.outData2=false;
           }

        })
      },
      open () {
        let _this = this
        this.onShareAppMessage()
        // wx.showActionSheet({
        //   itemList: this.itemList,
        //   success: function (res) {
        //     if (res.tapIndex == 0) {
        //
        //         _this.showShareMenu()
        //     }
        //     //console.log('index：' + res.tapIndex, '用户选的值为：' + _this.itemList[res.tapIndex])
        //   }
        // })
      },
      showShareMenu () {
        wx.showShareMenu()
       // console.log('显示了当前页面的转发按钮')
      },

      onChange (e) {
        this.activeNames = e.mp.detail
      }
    }
  }
</script>
<style>
  .pagesBox .van-button__text{
    font-size: 37rpx;
  }
  .pagesBox .van-cell__title{
    font-size: 32rpx;
  }
</style>
<style scoped>
  .pagesBox{
    width: 100%;
    height: 100%;
    padding-top:100rpx;
    background: #fff;
  }
  .shareBtn{
    background-color: #07c160;
    border:none;
    height: 70rpx;
    width: 200rpx;
    line-height:58rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
    margin-left: 30rpx;
  }
  .shareBtn:after{
    border:none;
  }
  .weui-media-box__bd h4{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .share{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border:none;
    padding-left: 0;
    padding-right: 0;
    font-size: 24rpx;

  }
  .share:after{
    border:none;
  }
  .goHomeMy{
    border:none;
    height:70rpx;
    width: 200rpx;
    line-height:66rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
    margin-left: 30rpx;
  }
  .btnList{
    width: 100%;
    background-color: #fff;
     display: flex;
    justify-content: flex-start;
    font-size: 24rpx;
    text-align: center;
    box-sizing: border-box;
    padding:0 10%;
  }
  .btnList>li{
    margin-right: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .btnList p{
    width: 80rpx;
    height: 80rpx;
    background: rgb(63,176,244);

    border-radius: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

  }
  .btnList p>img{
    width: 50rpx;
    height:50rpx;
  }
  .btn_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:40rpx;
  }
</style>
